<template>
  <view class="chat-page">
    <!-- nav -->
    <tui-navigation-bar :isOpacity="false" color="#333" class="nav">
      <view class="nav-content">
        <view class="left">
          <tui-icon
            name="arrowleft"
            color="#333"
            size="30"
            unit="px"
            @click="back"
          />
        </view>
        <view class="center">
          <view class="title">{{ title }}</view>
          <view class="desc">{{ desc }}</view>
        </view>
        <view class="right">
          <view
            class="iconfont icon-videocameraadd r"
            v-show="type != '0'"
            @click="call"
          />
          <tui-icon
            name="more-fill"
            color="#333"
            size="23"
            unit="px"
            class="r2"
            @click="openMore"
          />
        </view>
      </view>
    </tui-navigation-bar>
    <!-- content -->
    <view class="content"> </view>
    <!-- bottom -->
    <!-- 官方账号 -->
    <tui-bottom-navigation
      v-if="type == '0' && !showChatBar"
      :itemList="itemList"
      @click="clickMenu"
      showKeyboard
      greyBorder
      @clickKeyboard="showChatBar = true"
      backgroundColor="#fff"
      iconSize="13px"
    />
    <!-- 键盘 -->
    <xboot-chat-bar
      v-if="type != '0' || showChatBar"
      :showMenu="type == '0'"
      @clickMenu="showChatBar = false"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      desc: "",
      type: "",
      showChatBar: false,
      itemList: [
        {
          text: "往期",
          iconPath: "/static/icon/menu.png",
          color: "#222",
          //1-选中切换，2-跳转、请求、其他操作，3-菜单
          type: 3,
          //自定义参数，类型自定义
          parameter: null,
          //子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
          popupLeft: "",
          itemList: [
            {
              //不建议超过6个字，请自行控制
              text: "全部文章",
              //自定义参数，类型自定义
              parameter: null,
            },
            {
              text: "XBoot小程序",
              //自定义参数，类型自定义
              parameter: null,
            },
          ],
        },
        {
          text: "更多",
          iconPath: "/static/icon/menu.png",
          color: "#222",
          //1-选中切换，2-跳转、请求、其他操作，3-菜单
          type: 3,
          //自定义参数，类型自定义
          parameter: null,
          //子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
          popupLeft: "",
          itemList: [
            {
              //不建议超过6个字，请自行控制
              text: "打赏作者",
              //自定义参数，类型自定义
              parameter: null,
            },
            {
              text: "联系我们",
              //自定义参数，类型自定义
              parameter: null,
            },
            {
              text: "文档",
              //自定义参数，类型自定义
              parameter: null,
            },
          ],
        },
      ],
    };
  },
  onLoad(options) {
    if (options.title) {
      this.title = options.title;
      this.desc = options.desc;
      this.type = options.type;
    }
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    call() {
      if (this.type == "2") {
        uni.showActionSheet({
          title: "呼叫 " + this.title,
          itemList: ["语音通话", "视频通话", "拨打电话"],
          success: (res) => {
            console.log("选中了第" + (res.tapIndex + 1) + "个按钮");
          },
          fail: function (res) {
            console.log(res.errMsg);
          },
        });
      } else {
        uni.showActionSheet({
          title: "发起会议",
          itemList: ["视频会议", "语音会议", "发起直播"],
          success: (res) => {
            console.log("选中了第" + (res.tapIndex + 1) + "个按钮");
          },
          fail: function (res) {
            console.log(res.errMsg);
          },
        });
      }
    },
    openMore() {
      uni.navigateTo({
        url: `/pages/message/chatSetting/chatSetting?title=${this.title}&type=${this.type}`,
      });
    },
    clickMenu(v) {
      console.log(v);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./chat.scss";
</style>
